<template>
  <div class>
    <work-calendar :list="noWorkList" :somthingList="somthingList" @onMonthChange="monthChange"></work-calendar>
  </div>
</template>

<script>
import workCalendar from "@/components/work-calendar/work-calendar";
import { workCalendarInit } from "@/pages/sysfun/decktop/function.js";
export default {
  components: { workCalendar },
  data() {
    return {
      noWorkList: [],
      somthingList: []
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init(v) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let params = {};
      if (v) {
        params = v;
      } else {
        params = {
          createUserId: user.id,
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1
        };
      }

      workCalendarInit(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.noWorkList = res.retBody.sys;
          this.somthingList = res.retBody.work;
        }
      });
    },
    monthChange(v) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let params = {
        createUserId: user.id,
        year: v.year,
        month: v.month + 1
      };
      this.init(params);
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
/deep/ .el-calendar-table .el-calendar-day {
  height: 26px;
  padding: 0;
  text-align: center;
  line-height: 26px;
  p {
    margin-block-start: 0;
    margin-block-end: 0;
  }
}
</style>